
<template>
	<div class="container">
		<h3>产品召回</h3>
		<el-row style="margin-top: 20px">
		    <el-col :span="7">
		        <el-input placeholder="请输入关键词" v-model="searchName" style="width: 300px">
		            <i slot="prefix" class="el-input__icon el-icon-search"></i>
		            <el-button slot="append" @click="handleSearch">搜索</el-button>
		        </el-input>
		    </el-col>
		   <el-button type="primary" @click="goadd" style="float: right; margin-right: 10px">新增</el-button>
		</el-row>

		<el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" style="margin-top: 20px">
		    <el-table-column prop="productName" sortable label="产品名称"></el-table-column>
		    <el-table-column prop="traceStep" sortable label="召回范围"></el-table-column>
		    <el-table-column prop="batchNo" sortable label="批号"></el-table-column>
		    <el-table-column prop="username" sortable label="操作人"></el-table-column>
		    <el-table-column label="操作" width="150" align="center">
		        <template slot-scope="scope">

		            <el-button  type="text" style="color: #409EFF" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
					<el-button  type="text" style="color: #409EFF" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

		        </template>
		    </el-table-column>
		</el-table>
		<el-pagination
		    layout="total, prev, pager, next, jumper"
		    :page-size="pagesize"
		    :current-page.sync="currentPage"
		    @current-change="handleCurrentChange"
		    :total="total"
		    style="margin-top: 20px"
		></el-pagination>
	</div>
</template>

<script>
	import axios from "axios"
	import { recall_page } from "@/request/supervisionCenterApi.js"
	export default{
		data(){
			return{
				searchName:'',
				tableData:[],
				currentPage: 1,
				pagesize: 10,
				total: 0,
			}
		},
		mounted(){
			this.init()
		},
		methods:{
			// 获取到列表数据
			init(){
				let data = {
					pageno:this.currentPage,
					pagesize:10,
				}
				// axios.post("http://192.168.0.100:8880/plant/recall/page",data).then((res)=>{
				axios.post("http://47.108.220.160:90/jcApi/plant/recall/page",data).then((res)=>{
					this.tableData = res.data.rows
					this.total = res.data.total

				})
			},

			// 跳转到编辑
			handleEdit(index,row){
				this.$router.push({
					path:'/supervisionCenterrecall/recall/edit',
					query:{id:row.id}
				})
			},

			// 跳转到查看
			handleCheck(index,row){
				this.$router.push({
					path:'/supervisionCenterrecall/recall/check',
					query:{id:row.id}
				})
			},

			// 跳转到新增
			goadd(){
				this.$router.push({
					path:'/supervisionCenterrecall/recall/recall',

				})
			},

			// 搜索
			handleSearch(){
				let data = {
					key:this.searchName,
					pageno:this.currentPage,
					pagesize:10,
				}
				// axios.post("http://192.168.0.100:8880/plant/recall/page",data).then((res)=>{
				axios.post("http://47.108.220.160:90/jcApi/plant/recall/page",data).then((res)=>{
					this.tableData = res.data.rows
					this.total = res.data.total

				})
			},
			// 点击切换 页码
			handleCurrentChange(val) {
			    this.currentPage = val;
			    this.init();
			},
		}
	}
</script>

<style scoped>
	.el-pagination {
	    text-align: center;
	}
</style>
